import { useRef, useMemo } from 'react';
import { Input } from 'antd';
import CommonModal from '@/components/CommonModal';
import SubTitle from '@/pages/OrderModule/common/components/SubTitle';

const descMaps = {
  balancePayAmount: '余额应付',
  creditPayAmount: '账期应付',
  companyAliPayAmount: '支付宝应付',
  balanceRefundAmount: '余额退回',
  creditRefundAmount: '账期退回',
}

export default ({ amountObj = {}, handleOk, handleCancel, }) => {

  const showInputPwd = useMemo(() => {//是否显示支付密码
    const arr = ['balancePayAmount', 'creditPayAmount', 'companyAliPayAmount'];
    return arr.some(item => Number(amountObj[item]));
  }, [])

  const inputPwd = useRef('');

  const handleSave = () => {
    if (showInputPwd && !inputPwd.current?.input?.value) {
      return message.info('请先填写支付密码');
    }
    handleOk(inputPwd.current?.input?.value);
  }

  return <CommonModal
    visible={true}
    title='金额处理'
    width={512}
    onCancel={handleCancel}
    onOk={handleSave}
  >

   <SubTitle symbol title='金额处理' as='s2' suffix='（针对异常已支付的代发订单，修改商品将会对金额进行处理）'/>

    {
      Object.keys(amountObj).map(item => {
        if (Number(amountObj[item]) && item != 'availBalance') {
          return <div key={item} style={{fontSize:'15px', lineHeight: '22px', color:'#333333', margin:'12px 0'}}>
            {descMaps[item]}：<span className='common-color9'> ￥{Math.abs(amountObj[item])}</span>
          </div>
        }
      })
    }

    {
      showInputPwd && (<>
        <SubTitle symbol title='支付密码' as='s3' />
        <div style={{ display: 'flex', alignItems:'center', marginTop: '12px' }}>
          <div className='lable-require' style={{width:'100px'}}>支付密码</div>
          <Input.Password placeholder="请输入支付密码" ref={inputPwd} />
        </div>
      </>)
    }

  </CommonModal>
}